<template>
  <div class="tw-libchart">
    <div v-show="data.length>0"
      class="tw-datasetchart"
      ref="chart"
      :style="{height: height, backgroundColor: bgColor}">
    </div>

    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import props from './props'
import chartMixins from '../tw-lib-base/chart/chart'

export default {
  name: 'chart-customized-bar-cylinder',

  mixins: [chartMixins],

  props,

  data() {
    return {
      chartType: 'pictorialBar'
    }
  },

  computed: {
    option () {
      let vm = this
      let barWidth = parseInt(this.barWidth)

      let xAxisData = []
      // let seriesData1 = []
      let seriesData = []
      let quaninner = []
      let quanouter = []
      let bar = []
      let bart = []
      let barb = []

      vm.data.forEach((item, idx) => {
        xAxisData.push(item.name)
        // seriesData1.push(item.value)
        bart.push({
          name: item.name,
          value: item.value,
          trueVal: item.value,
          symbolPosition: 'end',
          itemStyle: {
            normal: {
              color: vm.colors[2 * idx]  // 圆柱顶部颜色
            }
          }
        })

        barb.push({
          name: item.name,
          value: item.value === 0 ? 0.01 : item.value,
          trueVal: item.value,
          itemStyle: {
            normal: {
              color: vm.colors[2 * idx + 1] // 圆柱底部颜色
            }
          }
        })

        quaninner.push({
          name: item.name,
          value: item.value === 0 ? 0.01 : item.value,
          trueVal: item.value,
          itemStyle: {
            normal: {
              color: 'transparent',
              borderColor: vm.colors[2 * idx + 1], //底部内圆圈颜色
              borderWidth: 5
            }
          }
        })
        quanouter.push({
          name: item.name,
          value: item.value === 0 ? 0.01 : item.value,
          trueVal: item.value,
          itemStyle: {
            normal: {
              color: 'transparent',
              borderColor: vm.colors[2 * idx + 1],  //底部外圆圈颜色
              borderType: 'dashed',
              borderWidth: 5
            }
          }
        })

        bar.push({
          name: item.name,
          value: item.value,
          trueVal: item.value,
          label: {
            normal: {
              show: true,
              position: 'top',
              distance: parseInt(barWidth / 2),
              formatter: function(params) {
                return params.value + vm.labelunit
              },
              textStyle: {
                color: vm.colors[2 * idx], //柱子对应数值颜色
                fontSize: this.labelFontSize
              }
            }
          },
          itemStyle: {
            normal: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: 'linear',
                global: false,
                colorStops: [{
                  offset: 0,
                  color: vm.quancolors[idx]
                }, {
                  offset: 1,
                  color: vm.colors[2 * idx + 1] //底部渐变颜色
                }]
              }
            }
          }
        })
      })

      return {

        grid: {
          show: this.showGrid,
          left: this.gridLeft === '' ? 'auto' : this.gridLeft,
          top: this.gridTop === '' ? 'auto' : this.gridTop,
          right: this.gridRight === '' ? 'auto' : this.gridRight,
          bottom: this.gridBottom === '' ? 'auto' : this.gridBottom,
          borderWidth: 0,
          containLabel: true
        },
        // tooltip: {
        //   trigger: this.triggerType,
        //   confine: this.confine,
        //   extraCssText: this.confine ? 'white-space: normal; word-break: break-all;' : '',
        //   formatter: this.useTooltipFun ? this.tooltipFunction : this.tooltipLabel
        // },
        xAxis: {
          data: xAxisData,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            interval:0,
            textStyle: {
              color: this.labelColor,
              fontSize: this.axisFontSize,
            },
            margin: parseInt(barWidth / 1.5), //刻度标签与轴线之间的距离。
          }
        },
        yAxis: {
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        series: [{
          name: '',
          type: 'pictorialBar',
          symbolSize: [barWidth, parseInt(barWidth / 2)],
          symbolOffset: [0, -1 * parseInt(barWidth / 4)],
          z: 12,
          data: bart
          // [{
          //     name: '关井数',
          //     value: '981',
          //     trueVal: '98',
          //     symbolPosition: 'end',
          //     itemStyle: {
          //         normal: {
          //             color: '#00fff5'  //圆柱顶部颜色

          //         }
          //     }
          // }, {
          //     name: '开井数',
          //     value: '1000',
          //     trueVal: '100',
          //     symbolPosition: 'end',
          //     itemStyle: {
          //         normal: {
          //             color: '#ffcc00' //圆柱顶部颜色
          //         }
          //     }
          // }, {
          //     name: '不在线',
          //     value: '900',
          //     trueVal: '90',
          //     symbolPosition: 'end',
          //     itemStyle: {
          //         normal: {
          //             color: '#b9b7ff' //圆柱顶部颜色
          //         }
          //     }
          // }]
        }, {
          name: '',
          type: 'pictorialBar',
          symbolSize: [barWidth, parseInt(barWidth / 2)],
          symbolOffset: [0, parseInt(barWidth / 4)],
          z: 12,
          data: barb
          // [{
          //     name: '关井数',
          //     value: '981',
          //     trueVal: '98',
          //     itemStyle: {
          //         normal: {
          //             color: '#43bafe' //圆柱底部颜色
          //         }
          //     }
          // }, {
          //     name: '开井数',
          //     value: '1000',
          //     trueVal: '100',
          //     itemStyle: {
          //         normal: {
          //             color: '#ff7800' //圆柱底部颜色
          //         }
          //     }
          // }, {
          //     name: '不在线',
          //     value: '900',
          //     trueVal: '90',
          //     itemStyle: {
          //         normal: {
          //             color: '#e9a5ff' //圆柱底部颜色
          //         }
          //     }
          // }]
        }, {
          name: '',
          type: 'pictorialBar',
          symbolSize: [(barWidth * 1.2), parseInt(barWidth / 2.6)],
          symbolOffset: [0, parseInt(barWidth / 2.6)],
          z: 11,
          data: quaninner
          // [{
          //     name: '关井数',
          //     value: '981',
          //     trueVal: '98',
          //     itemStyle: {
          //         normal: {
          //             color: 'transparent',
          //             borderColor: '#43bafe', //底部内圆圈颜色
          //             borderWidth: 5
          //         }
          //     }
          // }, {
          //     name: '开井数',
          //     value: '1000',
          //     trueVal: '100',
          //     itemStyle: {
          //         normal: {
          //             color: 'transparent',
          //             borderColor: '#ff7800', //底部内圆圈颜色
          //             borderWidth: 5
          //         }
          //     }
          // }, {
          //     name: '不在线',
          //     value: '900',
          //     trueVal: '90',
          //     itemStyle: {
          //         normal: {
          //             color: 'transparent',
          //             borderColor: '#e9a5ff', //底部内圆圈颜色
          //             borderWidth: 5
          //         }
          //     }
          // }]
        }, {
          name: '',
          type: 'pictorialBar',
          symbolSize: [barWidth * 2, parseInt(barWidth / 2)],
          symbolOffset: [0, parseInt(barWidth / 2)],
          z: 10,
          data: quanouter
          // [{
          //     name: '关井数',
          //     value: '981',
          //     trueVal: '98',
          //     itemStyle: {
          //         normal: {
          //             color: 'transparent',
          //             borderColor: '#43bafe',  //底部外圆圈颜色
          //             borderType: 'dashed',
          //             borderWidth: 5
          //         }
          //     }
          // }, {
          //     name: '开井数',
          //     value: '1000',
          //     trueVal: '100',
          //     itemStyle: {
          //         normal: {
          //             color: 'transparent',
          //             borderColor: '#ff7800', //底部外圆圈颜色
          //             borderType: 'dashed',
          //             borderWidth: 5
          //         }
          //     }
          // }, {
          //     name: '不在线',
          //     value: '900',
          //     trueVal: '90',
          //     itemStyle: {
          //         normal: {
          //             color: 'transparent',
          //             borderColor: '#e9a5ff', //底部外圆圈颜色
          //             borderType: 'dashed',
          //             borderWidth: 5
          //         }
          //     }
          // }]
        }, {
          type: 'bar',
          silent: true,
          barWidth: barWidth,
          barGap: '-100%',
          data: bar
          // [{
          //     name: '关井数',
          //     value: '981',
          //     trueVal: '98',
          //     label: {
          //     normal: {
          //         show: true,
          //         position: 'top',
          //         distance: 40,
          //         textStyle: {
          //             color: '#00fff5', //柱子对应数值颜色
          //             fontSize: 40
          //         }
          //     }
          // },
          //     itemStyle: {
          //         normal: {
          //             color: {
          //                 x: 0,
          //                 y: 0,
          //                 x2: 0,
          //                 y2: 1,
          //                 type: 'linear',
          //                 global: false,
          //                 colorStops: [{
          //                     offset: 0,
          //                     color: 'rgba(0,255,245,0.5)'
          //                 }, {
          //                     offset: 1,
          //                     color: '#43bafe' //底部渐变颜色
          //                 }]
          //             }
          //         }
          //     }
          //   }, {
          //     name: '开井数',
          //     value: '1000',
          //     trueVal: '100',
          //     label: {
          //     normal: {
          //         show: true,
          //         position: 'top',
          //         distance: 40,
          //         textStyle: {
          //             color: '#ffcc00', //柱子对应数值颜色
          //             fontSize: 40
          //         }
          //     }
          //   },
          //     itemStyle: {
          //         normal: {
          //             color: {
          //                 x: 0,
          //                 y: 0,
          //                 x2: 0,
          //                 y2: 1,
          //                 type: 'linear',
          //                 global: false,
          //                 colorStops: [{
          //                     offset: 0,
          //                     color: 'rgba(255,204,0,0.5)'
          //                 }, {
          //                     offset: 1,
          //                     color: '#ff7800' //底部渐变颜色
          //                 }]
          //             }
          //         }
          //     }
          // }, {
          //     name: '不在线',
          //     value: '900',
          //     trueVal: '90',
          //     label: {
          //     normal: {
          //         show: true,
          //         position: 'top',
          //         distance: 40,
          //         textStyle: {
          //             color: '#b9b7ff', //柱子对应数值颜色
          //             fontSize: 40
          //         }
          //     }
          // },
          //     itemStyle: {
          //         normal: {
          //             color: {
          //                 x: 0,
          //                 y: 0,
          //                 x2: 0,
          //                 y2: 1,
          //                 type: 'linear',
          //                 global: false,
          //                 colorStops: [{
          //                     offset: 0,
          //                     color: 'rgba(185,183,255,0.5)'
          //                 }, {
          //                     offset: 1,
          //                     color: '#e9a5ff' //底部渐变颜色
          //                 }]
          //             }
          //         }
          //     }
          // }]
        }]
      }
      // return {
      //   xAxis: {
      //     data: xAxisData,
      //     axisTick: {
      //       show: false
      //     },
      //     axisLine: {
      //       show: false
      //     },
      //     axisLabel: {
      //       show: true,
      //       margin: 25,
      //       align: 'center',
      //       textStyle: {
      //         fontSize: this.labelFontSize,
      //         color: this.labelColor,
      //       }
      //     },
      //     interval: 0
      //   },
      //   yAxis: {
      //     splitLine: {
      //       show: false
      //     },
      //     axisTick: {
      //       show: false
      //     },
      //     axisLine: {
      //       show: false
      //     },
      //     axisLabel: {
      //       show: false
      //     }
      //   },
      //   series: [{
      //     name: '柱顶部',
      //     type: 'pictorialBar',
      //     symbolSize: [this.barWidth, 10],
      //     symbolOffset: [0, -5],
      //     z: 12,
      //     itemStyle: {
      //       normal: {
      //           color: function(params) {
      //               return vm.colors[2 * params.dataIndex + 1]
      //           }
      //       }
      //     },
      //     label: {
      //       show: true,
      //       position: 'top',
      //       fontSize: 16
      //     },
      //     symbolPosition: 'end',
      //     data: seriesData1,
      //   }, {
      //     name: '柱底部',
      //     type: 'pictorialBar',
      //     symbolSize: [this.barWidth, 10],
      //     symbolOffset: [0, 5],
      //     z: 12,
      //     itemStyle: {
      //       normal: {
      //         color: function (params) {
      //           return vm.colors[2 * params.dataIndex]
      //         }
      //       }
      //     },
      //     data: seriesData1
      //   },
      //   {
      //     name: '第一圈',
      //     type: 'pictorialBar',
      //     symbolSize: [57, 16],
      //     symbolOffset: [0, 11],
      //     z: 11,
      //     itemStyle: {
      //       normal: {
      //         color: 'transparent',
      //         borderColor: this.quancolors[0],
      //         borderWidth: 2
      //       }
      //     },
      //     data: seriesData1
      //   },
      //   {
      //     name: '第二圈',
      //     type: 'pictorialBar',
      //     symbolSize: [82, 22],
      //     symbolOffset: [0, 17],
      //     z: 10,
      //     itemStyle: {
      //       normal: {
      //         // color: 'transparent',
      //         // borderColor: barTopColor[0],
      //         // borderWidth: 2
      //         color: 'transparent',
      //         borderColor: this.quancolors[1],
      //         borderType: 'dashed',
      //         borderWidth: 2
      //       }
      //     },
      //     data: seriesData1
      //   }, {
      //     type: 'bar',
      //     itemStyle: {
      //       normal: {
      //         color: function(params) {
      //           return new echarts.graphic.LinearGradient(
      //             0, 0, 0, 1,
      //             [{
      //                 offset: 1,
      //                 color: vm.colors[2 * params.dataIndex]
      //               },
      //               {
      //                 offset: 0,
      //                 color: vm.colors[2 * params.dataIndex + 1]
      //               }
      //             ]
      //           );
      //         },
      //         opacity: 0.8
      //       }
      //     },
      //     z: 16,
      //     silent: true,
      //     barWidth: this.barWidth,
      //     barGap: '-100%', // Make series be overlap
      //     data: seriesData1
      //   }]
      // }
    }
  },

  methods: {
    setSeries () {

    }
  },

  watch: {
    innerRadius () {
      this.setSeries()
    },
    outerRadius () {
      this.setSeries()
    },

    showLabel () {
      this.setSeries()
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
